"use client";
import dynamic from "next/dynamic";
import Image from "next/image";
import { useAuth } from "@/app/components/hooks/useAuth";
import styles from "./pages.module.scss";
import Booking from './img_nhzd@2x.png'

const Globe = dynamic(() => import("./GlobeChart").then((mod) => mod.default), {
  ssr: false,
});

export default function Earth() {
  useAuth();
  return (
    <div style={{ position: "relative" }}>
      <Globe />
      <Image
        src={Booking}
        alt={""}
        style={{ width: 117, height: 182,position: "absolute", bottom: 0, right: 0 }}
      />
      <ul className={styles.tips}>
        <li>
          <i
            style={{
              background:
                "radial-gradient( 0% 50% at 50% 50%, #E28F25 0%, #F3C24C 100%)",
            }}
          />
          两仓一线
        </li>
        <li>
          <i
            style={{
              background:
                "radial-gradient( 0% 50% at 50% 50%, #2F95D7 0%, #87CFFE 100%)",
            }}
          />
          海运航线
        </li>
        {/* <li>
          <i
            style={{
              background:
                "radial-gradient( 0% 49% at 49% 50%, #00B7B8 0%, #00F9B1 100%)",
            }}
          />
          空运航线
        </li> */}
      </ul>
    </div>
  );
}
